<template>
  <div class="container">
    <div class="page-title" @click="handleToView">
      <span>兵器工业集团先进民品产业体系评估</span>
    </div>

    <div class="page-top">
      <div class="title">开始评估</div>
      <div class="ftitle">上传文件</div>

      <div
        class="file-upload-area"
        @dragover.prevent="handleDragOver"
        @dragleave.prevent="handleDragLeave"
        @drop.prevent="handleDrop"
        :class="{ 'drag-active': isDragging }"
        @click="triggerUpload"
      >
        <input
          type="file"
          ref="fileInput"
          hidden
          @change="handleFileChange"
          accept=".xlsx"
        />
        <div class="upload-status">
          <div class="upload-content">
            <!-- 添加上传图标 -->
            <img src="@/assets/rar.png" alt="" />
            <span class="placeholder" v-if="!selectedFile">
              点击或将文件拖拽到此处上传
            </span>

            <div class="file-meta" v-if="selectedFile">
              <span class="file-info">{{ selectedFile || '未选择文件' }}</span>
              <button
                v-if="selectedFile"
                class="clear-btn"
                @click.stop="clearFile"
              >
                ×
              </button>
            </div>
          </div>
        </div>
        <p class="format-tip">文档格式：xlsx文件</p>
      </div>

      <div class="button" @click="hadnleSubmit">开始智能审查</div>

      <!-- 文件预览弹窗 -->
      <div v-if="showPreview" class="preview-modal" @click="closePreview">
        <div class="preview-content" @click.stop>
          <div class="preview-body">
            <VueOfficeExcel :src="fileUrl" class="document-preview" />
          </div>
          <div class="preview-footer">
            <button class="close-btn" @click="closePreview">关闭</button>
          </div>
        </div>
      </div>
    </div>

    <div class="page-bottom">
      <div class="ftitle">历史评审报告</div>
      <ul>
        <li v-for="item in list" :key="item.id" @click="handleToDetail(item)">
          <strong>{{ item.title }}</strong>
          <div class="bot">
            <span>{{ item.createtime }}</span>
            <div class="r">
              <img src="@/assets/y2.png" alt="" />
            </div>
          </div>
        </li>
      </ul>

      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          size="small"
          background
          layout="prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { getEvaluationList, getEvaluationCalculate } from '@/api/index';
  import VueOfficeExcel from '@vue-office/excel';
  import '@vue-office/excel/lib/index.css';
  import { useResultStore } from '@/stores/result';
  import { setItem, getItem, removeItem } from '@/utils/storage';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';

  const resultStore = useResultStore();
  const router = useRouter();

  const selectedFile = ref(null);
  const uploadFile = ref(null);
  // 新增拖拽状态
  const isDragging = ref(false);
  const fileInput = ref(null);
  // 预览相关状态
  const showPreview = ref(false);
  const fileUrl = ref('');

  const handleToView = () => {
    router.push({
      path: '/detail',
    });
  };

  const handleToDetail = item => {
    resultStore.setResultData(item); 
    setItem('resultData', item);
    router.push({
      path: '/result',
    });
  };

  const hadnleSubmit = () => {
    if (!uploadFile.value) {
      ElMessage.error('请上传文件');
      return;
    }
    const formData = new FormData();
    formData.append('excel_file', uploadFile.value);
    getEvaluationCalculate(formData).then(data => {
      resultStore.setResultData(data);
      setItem('resultData', data); 
      router.push({
        path: '/result',
      });
    });
  };

  // 拖拽处理逻辑
  const handleDragOver = () => {
    isDragging.value = true;
  };

  const handleDragLeave = () => {
    isDragging.value = false;
  };

  const handleDrop = e => {
    isDragging.value = false;
    const files = e.dataTransfer.files;
    if (files.length > 0) {
      handleFileUpload(files[0]);
    }
  };

  // 统一文件处理
  const handleFileChange = e => {
    const file = e.target.files[0];
    if (file && validateFile(file)) {
      handleFileUpload(file);
    }
  };

  const handleFileUpload = file => {
    uploadFile.value = file;
    selectedFile.value = file.name;

    // 创建文件URL用于预览
    fileUrl.value = URL.createObjectURL(file);
    // 显示预览弹窗
    showPreview.value = true;
  };

  // 清除文件
  const clearFile = () => {
    selectedFile.value = null;
    uploadFile.value = null;
    // 重置input元素的值
    if (fileInput.value) {
      fileInput.value.value = '';
    }
    // 清理文件URL
    if (fileUrl.value) {
      URL.revokeObjectURL(fileUrl.value);
      fileUrl.value = '';
    }
    showPreview.value = false;
  };

  // 关闭预览
  const closePreview = () => {
    showPreview.value = false;
  };

  const triggerUpload = () => fileInput.value.click();

  const validateFile = file => {
    const validTypes = [
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    ];
    const maxSize = 10 * 1024 * 1024;

    if (!validTypes.includes(file.type)) {
      ElMessage.error('只支持xlsx文件格式');
      return false;
    }

    if (file.size > maxSize) {
      ElMessage.error('文件大小超过限制');
      return false;
    }

    return true;
  };

  const list = ref([]);
  const currentPage = ref(1);
  const pageSize = ref(8);
  const total = ref(0);

  const getList = async () => {
    const res = await getEvaluationList({
      page: currentPage.value,
      pagesize: pageSize.value,
    });
    list.value = res.data;
    total.value = res.total;
  };

  const handleCurrentChange = val => {
    currentPage.value = val;
    getList();
  };

  onMounted(() => {
    getList();
  });
</script>

<style scoped lang="scss">
  .page-title {
    padding: 2rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(to bottom, #e9edff 0%, #ffffff 80%);
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(103, 148, 198, 0.4);
    box-sizing: border-box;
    margin-bottom: 30px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #2d5d9b;
    cursor: pointer;
    span {
      display: block;
      transition: all 0.3s ease;
    }
    &:hover {
      span {
        transform: scale(1.1);
      }
    }
  }

  .page-bottom {
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(to bottom, #e9edff 0%, #ffffff 80%);
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(103, 148, 198, 0.4);
    box-sizing: border-box;
    margin-bottom: 80px;
    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      list-style: none;
      li {
        width: 300px;
        height: 200px;
        background: #ffffff;
        border: 1px solid #dcdfe6;
        border-radius: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
        &:hover {
          transform: translateY(-2px);
        }
        .bot {
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          .r {
            display: flex;
            align-items: center;
            img {
              margin-left: 10px;
              cursor: pointer;
              &:hover {
                transform: scale(1.1);
              }
            }
          }
          span {
            font-size: 14px;
            color: #999999;
          }
        }
        strong {
          display: block;
          width: 100%;
          text-align: center;
          line-height: 140px;
          font-size: 20px;
          color: #2d2d2d;
          height: 140px;
          background: url('@/assets/hbg.png') no-repeat center;
        }
      }
    }
    .ftitle {
      font-size: 18px;
      position: relative;
      padding-left: 10px;
      margin-bottom: 20px;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        width: 4px;
        height: 14px;
        background: #2d5d9b;
      }
    }

    .pagination-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      padding-bottom: 20px;

      :deep(.el-pagination) {
        .el-pager li.is-active {
          background-color: #2d5db5;
          color: white;
        }
      }
    }
  }

  .button {
    width: 1000px;
    height: 40px;
    background: #2d5db5;
    box-shadow: 0px 6px 16px 0px rgba(67, 126, 238, 0.3);
    border-radius: 4px;
    text-align: center;
    color: #fff;
    line-height: 40px;
    font-size: 15px;
    margin: 0 auto;
    margin-top: 30px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-1px);
    }
  }
  .page-top {
    z-index: 1;
    padding: 2rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(to bottom, #e9edff 0%, #ffffff 80%);
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(103, 148, 198, 0.4);
    box-sizing: border-box;
    margin-bottom: 30px;
    .title {
      text-align: center;
      font-size: 28px;
    }
    .ftitle {
      font-size: 18px;
      position: relative;
      padding-left: 10px;
      margin-bottom: 20px;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        width: 4px;
        height: 14px;
        background: #2d5d9b;
      }
    }
    .file-upload-area {
      width: 1000px;
      height: 148px;
      cursor: pointer;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e1e2e9;
      margin: 0 auto;
      padding: 24px 0;
      img {
        display: block;
        margin: 0 auto;
        width: 36px;
      }
    }
  }

  .placeholder {
    display: block;
    font-size: 14px;
    color: #333333;
  }

  .format-tip {
    text-align: center;
    font-size: 12px;
    color: #72777d;
    margin-top: 16px;
  }

  /* 拖拽激活样式 */
  .file-upload-area.drag-active {
    border-color: #2e5a88;
    background: #f8faff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 90, 136, 0.1);
  }

  /* 上传内容布局 */
  .upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .upload-icon {
    width: 48px;
    height: 48px;
    fill: #2e5a88;
    transition: transform 0.3s;
  }

  .file-upload-area:hover .upload-icon {
    transform: translateY(-3px);
  }

  .file-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .clear-btn {
    color: #ef4444;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    height: 12px;
    line-height: 12px;
    transition: all 0.3s;

    &:hover {
      transform: scale(1.2);
    }
  }

  /* 预览弹窗样式 */
  .preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .preview-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    height: 80%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }

  .preview-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid #e1e2e9;
  }

  .close-btn {
    background: #2d5db5;
    box-shadow: 0px 6px 16px 0px rgba(67, 126, 238, 0.3);
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: white;
    padding: 8px 24px;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-1px);
    }
  }

  .preview-body {
    flex: 1;
    padding: 16px;
    overflow: hidden;
  }

  .document-preview {
    width: 100%;
    height: 100%;
    border: 1px solid #e1e2e9;
    border-radius: 4px;
  }
</style>
